<%-- 
    Document   : sysLog
    Created on : 2018-10-23, 8:30:12
    Author     : danny
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>系统日志</title>
        <%@include file="/WEB-INF/jspf/top_easyui.jspf" %>
        <script type="text/javascript" src="${contextPath}/easyui/plugins/datagrid-detailview.js"></script>
        <script type="text/javascript" >
            $(document).ready(function () {
                var treeData;
                $('#list_log').datagrid({
                    //title: '日志列表', //标题
                    method: 'post', //提交方式
                    border: false,
                    sortName:'operTime', sortOrder:'desc',
                    singleSelect: true,
                    fit: true,
                    fitColumns: true, //自动调整列
                    striped: true, //奇偶行颜色不同
                    url: "${contextPath}/syslog/data.json",
//                    idField: 'id', //主键字段
                    pagination: true, //显示分页
                    rownumbers: true, //显示行号
                    looadMsg: "正在加载中，请稍候...",
                    columns: [[
                            {field: 'oper', title: '操作', width: 50, align: 'center',
                                formatter: function (value, row, index) {
                                    var operContent = '<a href="javascript:showDetaile(' + row.id + ');" calss="tdmenuUmg"><img title="详情" src="${contextPath}/resources/css/icons/detail.png"/></a> ';
                                    return operContent;
                                }
                            },
                            {field: "sysUserAccount", title: '操作者账号', width: 100, align: 'center', sortable: true}, //sortable排序
                            {field: "logContent", title: '日志描述', width: 100, align: 'center', sortable: true},
                            {field: "operTime", title: '操作时间', width: 100, align: 'center', sortable: true,
                                formatter: function (value, row, index) {
                                    var date = new Date(value);
                                    return date.toLocaleString();
                                }
                            },
                            {field: "result", title: '操作结果', width: 100, align: 'center', sortable: true,
                                formatter: function (value, row, index) {
                                    if (value == '0') {
                                        return "成功";
                                    } else {
                                        return "失败";
                                    }
                                }
                            },
                            {field: "type", title: '日志类型', width: 100, align: 'center', sortable: true,
                                formatter: function (value, row, index) {
                                    if (value == '1') {
                                        return "系统日志";
                                    } else if (value == '2') {
                                        return "操作日志";
                                    } else {
                                        return "其他";
                                    }
                                }
                            }

                        ]],
//                    detailFormatter: function (index, row) {
//                        return '<div class="treePanel banner-color" style="padding:2px;height:205px;overflow-y:scroll"><img class="loadingImg" style="margin:5px" src="${contextPath}/resources/images/tree_loading.gif"/><ul id="sub' + index + '"></ul></div>';
//                    },
//                    onExpandRow: function (index, row) {
////                        console.log($('#sub' + index).html());
//                        if ($.isEmptyObject($('#sub' + index).html())) {
//                            $.ajax({
//                                url: "${contextPath}/syslog/data.json?id=" + row.id,
//                                type: "get",
//                                success: function (tree) {
//                                    $('#sub' + index).tree({
//                                        animate: true, data: tree.menu
//                                        , onLoadSuccess: function () {
//                                            $('#sub' + index).prev().hide();
//                                        }
//                                    });
//                                }
//                            });
//                        }
//                        $('#list_role').datagrid('fixDetailRowHeight', index);
//                    },
                    onDblClickRow: function (rowIndex) {//双击一行时触发
                        showDetaile(rowIndex);
                    }
                });
                var p = $('#list_log').datagrid('getPager');
                $(p).pagination({
                    pageList: [5, 10, 20, 30, 40, 50], //可以设置每页记录条数的列表 
                    beforePageText: '第', //页数文本框前显示的汉字 
                    afterPageText: '页    共 {pages} 页',
                    displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
                });
                //日志搜索searchBox
                $("#search_result").combobox({
                    prompt: '请选择操作结果',
                    panelHeight: 'auto',
                    width: 150,
                    editable: false, //设置文本框不可编辑
                    onChange: function () {
                        search();
                    }
                });
                $("#search_type").combobox({
                    prompt: '请选择日志类型',
                    panelHeight: 'auto',
                    width: 150,
                    editable: false,
                    onChange: function () {
                        search();
                    }
                });
                $('#beginTime').datetimebox({
                    showSeconds: false
                });
                $('#endTime').datetimebox({
                    showSeconds: false
                });
                $("#btn_search").click(function () {
                    search();
                });
                //重置
                $("#btn_close").click(function () {
                    $('#beginTime').datetimebox('setValue');
                    $('#endTime').datetimebox('setValue');
                    $('#search_result').combobox('setValue');
                    $('#search_type').combobox('setValue');
                    $('#list_log').datagrid({
                        url: "${contextPath}/syslog/data.json"
                    });
                });
                $("#detaile_dialog").dialog({
                    title: "日志详情",
                    iconCls: "icon-edit",
                    closed: true,
                    modal: true,
                    maximizable: false,
                    shadow: false,
                    width: 330, height: 250,
//                    top: 20,
                    looadMsg: "正在加载中，请稍候...",
                    buttons: [{
                            text: '取消',
                            handler: function () {
                                $('#detaile_dialog').dialog('close');
                            }
                        }]
                });
                // 注册全局ajax错误处理函数
                $(document).ajaxError(new jQueryAjaxErrorHandler());
            });
            function search() {
                var beginTime = $('#beginTime').datetimebox('getValue');
                var endTime = $('#endTime').datetimebox('getValue');
                var result = $('#search_result').combobox('getValues');
                var type = $('#search_type').combobox('getValues');
                $('#list_log').datagrid({
                    url: "${contextPath}/syslog/data.json?result=" + result + "&type=" + type + "&beginTime=" + beginTime + "&endTime=" + endTime
                });
            }
            function showDetaile(id) {
                $.ajax({
                    url: "${contextPath}/syslog/data.json?id=" + id,
                    success: function (data) {
                        var selected = $('#list_log').datagrid('getSelected');
                        if (selected) {
//                            alert(selected.logContent);
                            $('#detaile_dialog').dialog('setTitle', '查看日志详情');
                            $('#detaile_log').form('load', selected);
                        }
                        $('#detaile_dialog').dialog('open').dialog('hcenter');
                        $('#detaile_log textarea ,#detaile_log input').attr("disabled", true);
                    }
                });
            }
        </script>
    </head>
    <body class="easyui-layout">
        <script type="text/javascript">
            $("body").mask({
                maskMsg: '<div class="loading_text"><img src="${contextPath}/resources/images/loading_2.gif"/><span>正在初始化，请稍后...</span></div>',
                opacity: 1
            });
            $(function () {
                $("body").mask('hide');
            });
        </script>
        <!--搜索-->
        <div region="north" data-options="border:false" class="bottom-border" id="logSearchBar" style="height: 42px; padding-top: 2px;padding-left: 2px">
            <!--<div id="logSearchBar">-->
            <table>
                <tr>
                    <td>
                        <input id="search_result" class="easyui-combobox" name="result"
                               data-options="valueField: 'result',
                               textField: 'resultText',
                               data: [{result: '0', resultText: '成功'}, {result: '1', resultText: '失败'}]"/>
                    </td>
                    <td>
                        <input id="search_type" class="easyui-combobox" name="type" 
                               data-options="valueField: 'type',
                               textField: 'typeText',
                               data: [{type: '1', typeText:'系统日志'}, {type: '2', typeText:'操作日志'}]"/>
                    </td>
                    <td><input id="beginTime" type="text" name="birthday"/></td>
                    <td>-</td>
                    <td><input id="endTime" type="text" name="birthday"/></td>
                    <td> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,toggle:true" id="btn_search" style="background: #00bbee;">按日期查询</a></td>
                    <td> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,toggle:true" id="btn_close" style="background: #00bbee;">重置</a></td>

                </tr>
            </table>
            <!--</div>-->
        </div>
        <!--数据网格显示信息-->
        <div id="mainContainer" region="center" data-options="border:false"  title="" style="padding:0px;background:#eee;" class="bottom-border">
            <table  id="list_log" cellspacing="0" cellpadding="0"> 
            </table>
        </div>

        <!--显示日志详情-->
        <div id="detaile_dialog" class="easyui-dialog" >
            <form method="POST" id="detaile_log" >
                <div style="padding-left: 5px;padding-top: 5px;">
                    <div style="margin-bottom: 8px;">
                        <textarea class="easyui-textbox" data-options="multiline:true,label:'日志描述：'" name="logContent" style="width:300px;height: 100px;"></textarea>
                    </div>
                    <div>
                        <input class="easyui-textbox" data-options="label:'IP地址：',width:300" name="ip" />
                    </div>
                </div>
            </form>
        </div>

    </body>
</html>
